<template>
  <div>
    <div class="closeBox" v-if="isEdit">
      <el-icon style="cursor: pointer;" size="16" color="#7b7b7b"
        @click="delQuestion(_exaPaperQuestion, _exaPaperQuestionList)"><ele-Delete /></el-icon>
    </div>
    <div class="pb5" style="display: flex;">
      <span style="margin-right: 5px;font-weight: bold;">{{ _exaPaperQuestion.sort }}. </span>
      <span>{{ _exaPaperQuestion.title }}</span>
      <span class="ml8">({{ _exaPaperQuestion.score }}分)</span>
    </div>
    <div>
      <span v-html="_exaPaperQuestion.titleDetail" />
    </div>
    <div class="pt8 pb5" v-if="_exaPaperQuestion.exaQuestUserAnswer">
      <el-radio-group size="default" v-model="_exaPaperQuestion.exaQuestUserAnswer.answer" :disabled="isShowCurrentAnswer">
        <template v-for="option in _exaPaperQuestion.questionItems">
          <el-radio :value="option.sequence">{{ option.sequence }}. {{ option.title }}</el-radio>
        </template>
      </el-radio-group>
    </div>
    <div class="pt8 pb5" v-else>
      <el-radio-group size="default">
        <template v-for="option in _exaPaperQuestion.questionItems">
          <el-radio :value="option.sequence">{{ option.sequence }}. {{ option.title }}</el-radio>
        </template>
      </el-radio-group>
    </div>
    <div class="answerBox" v-if="isShowCurrentAnswer">
      <p class="pb5" style="color: green;">正确答案：{{ _exaPaperQuestion.correctAnswer }}<span>({{ _exaPaperQuestion.score }}分)</span>
        <el-tooltip effect="dark" :content="_exaPaperQuestion.analysis" placement="top-start">
          <el-icon size="18" color="#5d5d5d" style="margin-left: 10px;"><ele-Warning /></el-icon>
        </el-tooltip>
      </p>
      
      <MkFormRow v-if="_exaPaperQuestion.exaQuestUserAnswer">
        <MkInput v-model="_exaPaperQuestion.exaQuestUserAnswer.score" label="得分" :md="3" :config="{editable: false}"  />
        <template v-if="isCorrecting">
          <el-radio-group v-model="isCorrect" size="small" fill="#ccc" @change="changeCorrect(_exaPaperQuestion)">
            <el-radio-button :value="true"><el-icon size="20" color="green"><ele-Select /></el-icon></el-radio-button>
            <el-radio-button :value="false"><el-icon size="20" color="red"><ele-CloseBold /></el-icon></el-radio-button>
          </el-radio-group>
        </template>
        <span v-else-if="_exaPaperQuestion.exaQuestUserAnswer.status=='PointsAwarded'">
          <el-icon size="20" color="green" v-if="_exaPaperQuestion.exaQuestUserAnswer.answer == _exaPaperQuestion.correctAnswer"><ele-Select /></el-icon>
          <el-icon size="20" color="red" v-else><ele-CloseBold /></el-icon>
        </span>
      </MkFormRow>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ExaPaperQuestionUpdateInput } from '/@/api/exa/exaPaper/dto';

const props = defineProps({
  /** 是否已作答 */
  isShowCurrentAnswer: {
    type: Boolean,
    default: false
  },
  /** 是否正在批卷 */
  isCorrecting: {
    type: Boolean,
    default: false
  },
  /** 是否为编辑状态 */
  isEdit: {
    type: Boolean,
    default: false
  },
  exaPaperQuestionList: {
    type: Array as () => ExaPaperQuestionUpdateInput[],
    default: [],
  },
  exaPaperQuestion: {
    type: Object as () => ExaPaperQuestionUpdateInput,
    default: {}
  }
})
const emits = defineEmits(['update:exaPaperQuestionList','update:exaPaperQuestion','delQuestion'])
const isCorrect = ref()

const _exaPaperQuestion = useVModel(props, 'exaPaperQuestion', emits)
const _exaPaperQuestionList = useVModel(props, 'exaPaperQuestionList', emits)

/** 删除题目处理 */
const delQuestion = (exaPaperQuestion: ExaPaperQuestionUpdateInput, exaPaperQuestionList: ExaPaperQuestionUpdateInput[]) => {
  emits('delQuestion', exaPaperQuestion, exaPaperQuestionList)
}

/** 切换正确错误 */
const changeCorrect = (exaPaperQuestion: any) => {
  if(isCorrect.value) {
    exaPaperQuestion.exaQuestUserAnswer.score = exaPaperQuestion.score 
  } else {
    exaPaperQuestion.exaQuestUserAnswer.score = 0
  }
  exaPaperQuestion.exaQuestUserAnswer.status = "PointsAwarded"
}
</script>

<style lang='scss' scoped>
.closeBox {
  text-align: right;
}

.answerBox {
  :deep(.el-col) {
    margin-bottom: 0 !important;
  }
  :deep(.el-form-item--small) {
    margin-bottom: 0 !important;
  }
  :deep(.el-radio-button--small .el-radio-button__inner) {
    padding: 1px 8px;
  }
}
:deep(.el-radio-group) {
  display: block;
}
:deep(.el-radio) {
  display: block;
}
</style>